<script setup>
import request from '@/utils/request'
import { onMounted, ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import Goods from '@/components/goods.vue'
const route = useRoute()

const goods = ref([])
const getBook = async (type) => {
    const res = await request.get('/select', {
        params: {
            type
            // page: 1,
            // pageSize: 10
        }
    })
    console.log(res)
    goods.value = res.data.data
}
onMounted(() => {
    getBook(route.params.id)
})
onBeforeRouteUpdate((to) => {
    getBook(to.params.id)
})
</script>
<template>
    <el-carousel height="520px" class="carousel" motion-blur>
        <el-carousel-item>
            <img src="/image/bg1.jpg" alt="" class="img">
        </el-carousel-item>
        <el-carousel-item>
            <img src="/image/bg2.jpg" alt="" class="img">
        </el-carousel-item>
        <el-carousel-item>
            <img src="/image/bg3.jpg" alt="" class="img">
        </el-carousel-item>
    </el-carousel>
    <div class="htitle">分类书籍</div>
    <ul class="main">
        <Goods :goods="goods.record"></Goods>
    </ul>
</template>
<style scoped lang="scss">
.carousel {
    width: 1400px;
    margin: 0 auto;

    .img {
        width: 100%;
    }
}

.htitle {
    text-align: center;
    color: aqua;
    margin-top: 28px;
    letter-spacing: 8px;
    font-size: 28px;
    width: 100%;
    height: 60px;
    border-bottom: 2px solid aqua;
}

.main {
    display: flex;
    width: 1400px;
    min-height: 500px;
    margin: 8px auto;
    flex-wrap: wrap;
    padding: 8px 38px;
}
</style>